<template>
    <div>
        <div class="search">
            <input type="search" v-model="searchData.keyword" v-on:keyup="changeSearchStage($event)"
                placeholder="请搜索您想听的歌曲...">
        </div>
        <router-view :searchData="searchData" v-on:getSearchResult="getSearchResult"></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchData: {
                keyword: '',
                searchHotData: [],
                searchAdvData: [],
                searchResultData: []
            }
        }
    },
    created() {
        this.getSearchHot()
    },
    methods: {
        changeSearchStage(e) {
            if (this.searchData.keyword == "") {
                this.$router.replace('/home/search/searchhot').catch(err => err)
            }
            else {
                if (e.keyCode === 13) {
                    this.getSearchResult()
                }
                else {
                    this.getSearchAdv()
                }
            }
        },
        getSearchHot() {
            this.axios.get(`http://localhost:3000/search/hot/`)
                .then(result => {
                    this.searchData.searchHotData = result.data.result.hots
                })
        },
        getSearchAdv() {
            if (this.searchData.keyword == "") {
                return
            }
            this.axios.get(`http://localhost:3000/search/suggest?keywords=${this.searchData.keyword}&type=mobile`)
                .then(result => {
                    console.log(this.searchData.searchAdvData)
                    this.searchData.searchAdvData = result.data.result.allMatch
                    this.$router.replace('/home/search/searchadv').catch(err => { err })
                })
        },
        getSearchResult(keyword) {
            if (keyword) {
                this.searchData.keyword = keyword
            }
            if (this.searchData.keyword == "") {
                return
            }
            this.axios.get(`http://localhost:3000/search?keywords=${this.searchData.keyword}`)
                .then(result => {
                    this.searchData.searchResultData = result.data.result.songs
                    this.$router.replace('/home/search/searchresult').catch(err => { err })
                })
        }
    }
}
</script>

<style>
.search {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding: 15px;
    font-size: 13px;
    position: relative;
}

.search>input[type="search"] {
    width: 100%;
    height: 30px;
    padding: 15px;
    border-radius: 15px;
    border: none;
    outline: none;
    background: rgb(240, 240, 240);
    color: gray;
}
</style>